<template>
	<!-- 月产值率统计 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-row class="mt-2">
					<v-col cols="12" sm="3" md="2">
						<v-menu v-model="startMenu" :close-on-content-click="false" :nudge-right="40"
							transition="scale-transition" offset-y min-width="auto">
							<template v-slot:activator="{ on, attrs }">
								<v-text-field  required v-model="query.startTime"
									label="开始日期" readonly v-bind="attrs" v-on="on" dense outlined>
								</v-text-field>
							</template>
							<v-date-picker locale="zh-cn" v-model="query.startTime" type="month" no-title scrollable
								@input="startMenu = false">
							</v-date-picker>
						</v-menu>
					</v-col>
					
					<v-col cols="12" sm="3" md="2">
						<v-menu v-model="endMenu" :close-on-content-click="false" :nudge-right="40"
							transition="scale-transition" offset-y min-width="auto">
							<template v-slot:activator="{ on, attrs }">
								<v-text-field required v-model="query.endTime" label="结束日期"
									readonly v-bind="attrs" v-on="on" dense outlined>
								</v-text-field>
							</template>
							<v-date-picker locale="zh-cn" type="month" no-title scrollable v-model="query.endTime" @input="endMenu = false">
							</v-date-picker>
						</v-menu>
					</v-col>
					<v-col>
						<v-btn color="primary" @click="LoadPage">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="RefreshApps">
							刷新</v-btn>

					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-alert text color="blue-grey" class="text-center">
					如下统计的合同总金额：<a>{{this.totalmoney}}</a>万,出货总金额：<a>{{this.outtotalmoney}}</a>万，交付百分比：<a>{{this.outdeliverypercentage}}</a>%
				</v-alert>
				<v-data-table :headers="productionValueHeaderList" :items="productionValueDataList" small fixed-header
					item-key="id" dense class="text-no-wrap" loading-text="正在加载请稍等......"
					:loading="productionValueLoading" :options.sync="productionValueOptions"
					:footer-props="vuetifyDefaultPage" :server-items-length="productionValueTotalCount">
					<template v-slot:item.deliverypercentage="{ item }">
						{{item.deliverypercentage+'%'}}
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>

	</div>
</template>

<script>
	export default {
		name: 'mes_production_value',
		data: () => ({
			query: {
				startTime: null,
				endTime: null,
			},
			startMenu: false,
			endMenu: false,
			productionValueHeaderList: [{
					text: '年份',
					align: 'left',
					value: 'year',
					filterable: false,
				},
				{
					text: '月份',
					align: 'center',
					value: 'month',
					filterable: false,
				},
				{
					text: '项目号',
					align: 'center',
					value: 'projectcode',
					filterable: false,
				}, {
					text: '项目名称',
					align: 'center',
					value: 'projectname',
					filterable: false,
				}, {
					text: '合同金额',
					align: 'center',
					value: 'price',
					filterable: false,
				},
				{
					text: '出货金额',
					align: 'center',
					value: 'shipmentprice',
					filterable: false,
				},
				{
					text: '交付百分比',
					align: 'center',
					value: 'deliverypercentage',
					filterable: false,
				},
				{
					text: '备注',
					align: 'left',
					value: 'description',
					filterable: false,
				}
			],
			productionValueDataList: [],
			productionValueTotalCount: 0,
			productionValueLoading: true,
			productionValueOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 500
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [500,1000]
				// 'items-per-page-all-text': '100'
			},
			totalmoney: 0,
			outtotalmoney: 0,
			outdeliverypercentage: 0
		}),
		watch: {
			productionValueOptions: {
				handler() {
					this.LoadPage()
				},
				deep: true
			},
		},
		methods: {
			RefreshApps() {
				this.query.startTime = null
				this.query.endTime = null
			},
			async LoadPage() {
				this.productionValueLoading = true
				this.query.pageNumber = this.productionValueOptions.page
				this.query.pageSize = this.productionValueOptions.itemsPerPage
				var response = await this.$httpRequest({
					url: `MES/MESProductionValue/QueryPage`,
					method: 'post',
					data: this.query
				})
				if (response.status == 1) {
					this.productionValueDataList = response.data.data.result
					this.productionValueTotalCount = response.data.data.pagination.totalRecords
					this.totalmoney = response.data.totalmoney
					this.outtotalmoney = response.data.outtotalmoney
					this.outdeliverypercentage = response.data.outdeliverypercentage
					this.productionValueLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
		},
	}
</script>
